<template>
  <div class="flex justify-center py-16">
    <div class="flex flex-col space-y-4 rounded-lg bg-white p-8 bg-opacity-60 backdrop-blur-md">
      <h4 class="text-center text-2xl tracking-widest">时尚轻纺</h4>
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="far fa-user"></i>
        </span>
        <InputText placeholder="用户名" v-model="username" />
      </div>
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="far fa-lock"></i>
        </span>
        <Password placeholder="密码" v-model="password" :feedback="false" />
      </div>
      <Button label="登 录" :disabled="!username || !password" @click="show" />
    </div>
  </div>
  <Verify mode="pop" captchaType="blockPuzzle" ref="verify" @success="success" />
</template>

<script lang="ts">
export default defineComponent({
  name: 'Login'
})
</script>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { login } from '@/api/auth/token'
import { useToast } from 'primevue/usetoast'

let toast = useToast()

import Verify from '@/components/verifition/Verify.vue'
import Password from 'primevue/password/Password.vue'
import InputText from 'primevue/inputtext/InputText.vue'
import Button from 'primevue/button/Button.vue'

const verify = ref()
const username = ref('')
const password = ref('')

function show() {
  verify.value.show()
}

function success(verifition: string) {
  login(username.value, password.value, verifition)
    .then(() => {
      toast.add({ severity: 'success', summary: '登录成功', detail: '即将跳转...', life: 3000 })
      setTimeout(() => {
        window.location.href = '/'
      }, 1000)
    })
    .catch((err) => {
      toast.add({ severity: 'error', summary: '登录失败', detail: err.data.msg, life: 3000 })
    })
}
</script>